import React from "react";
import { Form, Input, Modal } from "antd";
import { openNotificationWithIcon } from "utils/comm";

const { TextArea } = Input;

const formItemLayout1 = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

@Form.create()
class CreateForm extends React.Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, dispatch, data } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      let type = "tenantManagement/addTenant";
      if (data) type = "tenantManagement/editTenant";
      values.tenantName = values.tenantName.trim();
      values.tenantCode = values.tenantCode.trim();
      if (values.description) {
        values.description = values.description.trim();
      }
      const record = data || {};
      dispatch({ type, payload: { ...record, ...values } }).then(
        ({ errCode, errMsg }) => {
          if (errCode === 0) {
            this.handleCancel(true);
            form.resetFields();
          } else {
            this.openNotificationWithIcon("warning", "", errMsg || "操作失败");
          }
        },
      );
    });
  };

  handleCancel = (isQuery = false) => {
    const { handleCreateVisible } = this.props;
    handleCreateVisible(false, "", isQuery);
  };

  render() {
    const { form, visible, confirmLoading, data = {}, title = "" } = this.props;
    const record = data || {};
    const { getFieldDecorator } = form;
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => this.handleCancel()}
        width="582px"
        centered
        confirmLoading={confirmLoading}
      >
        <Form>
          <Form.Item label="租户名称" {...formItemLayout1}>
            {getFieldDecorator("tenantName", {
              initialValue: record.tenantName || "",
              rules: [
                { required: true, message: "请输入租户名称" },
                { whitespace: true, message: "请输入租户名称" },
                { max: 20, message: "请不要超过20个字符" },
              ],
            })(<Input placeholder="请输入租户名称" />)}
          </Form.Item>
          <Form.Item label="租户编码" {...formItemLayout1}>
            {getFieldDecorator("tenantCode", {
              initialValue: record.tenantCode || "",
              rules: [
                { required: true, message: "请输入租户编码" },
                { whitespace: true, message: "请输入租户编码" },
                { max: 20, message: "请不要超过20个字符" },
                {
                  pattern: /^[a-zA-Z_][a-zA-Z_0-9-]*$/,
                  message:
                    "支持字母、数字、下划线、中划线，须以字母或者下划线开头",
                },
              ],
            })(<Input placeholder="请输入租户编码" />)}
          </Form.Item>
          <Form.Item label="联系人" {...formItemLayout1}>
            {getFieldDecorator("contactName", {
              initialValue: record.contactName || "",
              rules: [
                { required: true, message: "请输入联系人" },
                { whitespace: true, message: "请输入联系人" },
                { max: 20, message: "请不要超过20个字符" },
              ],
            })(<Input placeholder="请输入联系人" />)}
          </Form.Item>
          <Form.Item label="联系电话" {...formItemLayout1}>
            {getFieldDecorator("contactPhone", {
              initialValue: record.contactPhone || "",
              rules: [
                { required: true, message: "请输入联系电话" },
                { max: 20, message: "请不要超过20个字符" },
                // {
                //   // eslint-disable-next-line no-useless-escape
                //   pattern: /^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2,5,6,7]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                //   message: "请输入联系电话!",
                // },
              ],
            })(<Input placeholder="请输入联系电话" />)}
          </Form.Item>
          <Form.Item label="租户描述" {...formItemLayout1}>
            {getFieldDecorator("description", {
              initialValue: record.description || "",
              rules: [{ max: 100, message: "请不要超过100个字符" }],
            })(<TextArea placeholder="请输入租户描述" rows={4} />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
export default CreateForm;
